<template>
  <div id="app">
    <mt-header :title="this.$route.name" fixed>
      <div slot="left" v-if="this.$route.name!=`首页`">
        <mt-button icon="back"><router-link :to="backPath">返回</router-link></mt-button>
      </div>
      <div slot="right" v-if="this.$route.name!=`首页`">
        <router-link to='/'>首页</router-link>
      </div>
    </mt-header>
    <div class="margin_top">
      <router-view></router-view>
    </div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="首页"><router-link to='/'><i class="iconfont icon-shouye"></i><br/>首页</router-link></mt-tab-item>
      <mt-tab-item id="新闻"><router-link to='/news'><i class="iconfont icon-xinwen"></i><br/>新闻</router-link></mt-tab-item>
      <mt-tab-item id="产品"><router-link to='/product'><i class="iconfont icon-chanpin"></i><br/>产品</router-link></mt-tab-item>
      <mt-tab-item id="购物车"><router-link to='/cart'><i class="iconfont icon-cart"></i><br/>购物车</router-link></mt-tab-item>
      <mt-tab-item id="我的"><router-link to='/my'><i class="iconfont icon-wode"></i><br/>我的</router-link></mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selected: '首页',
      backPath:'',
    }
  },
  methods:{
    
  },
  watch:{ '$route'(to,from){
    this.backPath=from.path
  }}
}
</script>

<style>
  body{margin:0}
  .mint-header{background-color:#F40}
  .mint-header a{color:#fff;text-decoration:none}
  .margin_top{margin:40px 0;}
  .mint-tabbar a{color:#333;text-decoration:none}
  .mint-tabbar .mint-tab-item.is-selected{background:none}
  .mint-tabbar .router-link-exact-active{color:#F40}
</style>
